<template>
  <ul class="classify">
    <li
      v-for="(icon, index) in icons"
      :key="index"
      @click="changeRouter(icon.link)"
    >
      <i :class="icon.iconClass" :style="{ background: icon.background }"></i>
      <img src="" alt="" />
      <span>{{ icon.icontext }}</span>
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const icons = reactive([
  {
    iconClass: 'iconfont icon-shaozikuaizi',
    icontext: '美食',
    background: '#FD9D21',
    link: { name: 'foodlist' }
  },
  {
    iconClass: 'iconfont icon-dianying',
    icontext: '猫眼电影',
    background: '#FF6767',
    link: { name: 'moviehot' }
  },
  {
    iconClass: 'iconfont icon-jiudian',
    icontext: '酒店',
    background: '#8A90FA',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-xiuxian',
    icontext: '休闲娱乐',
    background: '#FED030',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-waimaiAPP',
    icontext: '外卖',
    background: '#FD9D21',
    link: { name: 'food' }
  },
  {
    iconClass: 'iconfont icon-KTV',
    icontext: 'KTV',
    background: '#FED030',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-zhoubianyou',
    icontext: '周边游',
    background: '#4DC6EE',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-renxiang',
    icontext: '丽人',
    background: '#FF80C2',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-qinziyou',
    icontext: '母婴亲子',
    background: '#FF80C2',
    link: { name: '' }
  },
  {
    iconClass: 'iconfont icon-shenglvehao',
    icontext: '全部分类',
    background: '#00D3BE',
    link: { name: '' }
  }
])
const router = useRouter()
function changeRouter(item) {
  router.push(item)
}
</script>

<style lang="scss" scoped>
@import '@/iconfont/iconfont.css';

.classify {
  display: flex;
  height: 1.62rem;
  flex-flow: wrap;
  // width: 100%;
  margin-bottom: 0.1rem;
  background: #fff;
  li {
    width: 20%;
    list-style: none;
    height: 0.81rem;
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .iconfont {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      font-size: 0.2rem;
      text-align: center;
      line-height: 0.4rem;
      color: #fff;
    }
    span {
      font-size: 0.12rem;
      margin-top: 0.03rem;
    }
  }
}
</style>
